<template>
  <section>
    <div class="wrapper">
      <h2>文件下载</h2>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多数据了"
        @load="onLoad"
      >
        <ul>
          <li v-for="(item, index) in list" :key="index" class="files">
            <a :href="item.fileUrl | allUrl" :download="item.originName">
              <i></i>
              <div>
                <p>{{ item.originName }}</p>
                <span>{{ item.createTime }}</span>
              </div>
            </a>
          </li>
        </ul>
      </van-list>
    </div>
  </section>
</template>
<script>
import api from "@/data/api/index.js";
import Vue from "vue";
import { List } from "vant";

Vue.use(List);

export default {
  data() {
    return {
      list: [],
      count: 0,
      loading: false,
      finished: false,
      params: {
        page: 1,
        rows: 10,
      },
    };
  },
  methods: {
    onLoad() {
      // 异步更新数据 todo
      api.filesList(this.params).then((res) => {
        this.count = res.count;
        this.list.push(...res.data);

        this.loading = false;
        if (this.list.length == this.count) {
          this.finished = true;
        } else {
          this.params.page++;
        }
      });
    },
  },
  filters: {
    allUrl(url) {
      return "/api/file/" + url;
    },
  },
};
</script>
<style lang="scss" scoped>
section {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  // min-height: 100%;
}
.wrapper {
  padding: 25px 20px;
  h2 {
    position: relative;
    display: inline-block;
    font-size: 24px;
    margin-bottom: 25px;
    z-index: 1;
    &::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 1px;
      height: 5px;
      background-color: #c9151e;
      z-index: -1;
    }
  }
  .files {
    margin: 10px 0 15px;
    a {
      color: #333;
    }
    i {
      float: left;
      width: 30px;
      height: 35px;
      background: url(../imgs/doc.png) no-repeat center top;
      background-size: contain;
    }
    div {
      margin-left: 42px;
      padding: 0 50px 10px 0;
      border-bottom: 1px solid #d5d5d5;
      background: url(../imgs/download.png) no-repeat right center;
      background-size: 20px auto;
      p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        // height: 40px;
        line-height: 20px;
        margin-bottom: 5px;
        font-size: 15px;
      }
      span {
        color: #666;
        font-size: 13px;
      }
    }
  }
}
</style>